$(function () {
    $(".smallimgbox").on(
        {
            mousemove: function (e) {
                let x = e.pageX - $(this).offset().left
                let y = e.pageY - $(this).offset().top
                let maskX = x - $(".cover").width() / 2
                let maskY = y - $(".cover").height() / 2
                let maskMax = $(this).width() - $(".cover").width()
                if (maskX <= 0) {
                    maskX = 0;
                } else if (maskX >= maskMax) {
                    maskX = maskMax;
                }
                if (maskY <= 0) {
                    maskY = 0;
                } else if (maskY >= maskMax) {
                    maskY = maskMax;
                }
                $(".cover").css({
                    left: maskX,
                    top: maskY
                })
                $(".bigimg").css({
                    left: -maskX * 2,
                    top: -maskY * 2
                })
            },
            mouseleave: function () {
                $(".cover,.bigimgBox").hide()
            },
            mouseenter: function () {
                $(".cover,.bigimgBox").show()
            }
        })
    // decodeURIComponent() 可以解码
    // console.log(decodeURIComponent(location.search).slice(5))
    var xhr = new XMLHttpRequest()
    xhr.open("get", "../tea.json")
    xhr.send()
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            return xhrtext = JSON.parse(xhr.responseText).data
        }
    }
    // 存储传递的参数
    let nowTea = decodeURIComponent(location.search).slice(5)
    setTimeout(function () {
        for (let i = 0; i < xhrtext.length; i++) {
            if (nowTea === xhrtext[i].name) {
                $(".teaName,.nowtea").text(xhrtext[i].name)
                $(".teaImg").prop("src", `${xhrtext[i].img}`)
                $(".money").text("￥" + xhrtext[i].money + ".0")
                $(".classifyTea ,.teaType").text(xhrtext[i].type)
                $(".numberText").text(xhrtext[i].number)
                $(".teaType").prop("href", `tea.html?type=${xhrtext[i].type}`)
            }
            if ($(".classifyTea").text() === xhrtext[i].type) {
                $(".corrImg").prop("src", `${xhrtext[i].img}`)
                $(".corrName").text(xhrtext[i].name)
                $(".corrMoney").text("￥" + xhrtext[i].money + ".0")
            }
        }
    }, 100)
    // 商品数量加减
    $(".minus,.add").on("click", function () {
        let teaNum = Number($(".teaNum").val()) + $(this).data("num")
        if (teaNum > 0) {
            $(".teaNum").val(teaNum)
        } else {
            teaNum = 0
        }
    })

    // 小购物车显示
    function apply() {
        let teaCar = JSON.parse(localStorage.getItem("teaCar"))
        let login = JSON.parse(localStorage.getItem("login"))
        $(".carLis").empty()
        for (const k in teaCar) {
            if (teaCar[k].user === login.user) {
                if (teaCar == null) {
                    teaCar = []
                }
            }
        }
        for (let i = 0; i < teaCar.length; i++) {
            let str = `
                <li>
                <img src="${teaCar[i].img}" alt="">
                <div class="carInfo">
                    <p>
                    <h5>${teaCar[i].name}</h5>
                    <span class="delTea">×</span></p>
                    <p><span>${teaCar[i].num}</span>×<span>￥${teaCar[i].bill}</span></p>
                </div>
            </li>
        `
            $(".carLis").append(str)

        }


        // 小购物车显示与隐藏
        $(".carBtn").on({
            mouseover: function () {
                let teaCar = JSON.parse(localStorage.getItem("teaCar"))
                if (teaCar.length > 0) {
                    let login = JSON.parse(localStorage.getItem("login"))
                    for (const k in teaCar) {
                        if (teaCar[k].user === login.user) {
                            if (teaCar.length > 0) {
                                $(".carLis").show()
                            } else {
                                $(".carLis").hide()
                            }
                        }
                    }
                }else{
                    $(".carLis").hide()
                }
            },
            mouseleave: function () {
                $(".carLis").hide()
            }
        })
    }

// 加入购物车
    let listNum = JSON.parse(localStorage.getItem("listNum"))
    $(".addCar").on("click", function () {
        let teaCar = JSON.parse(localStorage.getItem("teaCar"))
        if (teaCar === null) {
            teaCar = []
        }
        $(".carBtn>span").text(teaCar.length + 1)
        if (teaCar) {
            $(".carBtn>span").show()
        } else {
            $(".carBtn>span").hide()
        }
        let login = JSON.parse(localStorage.getItem("login"))
        if (login) {
            let teaCar = JSON.parse(localStorage.getItem("teaCar"))
            let date = new Date()
            if (teaCar === null) {
                teaCar = []
            }
            teaCar.push({
                user: login.user,
                name: $(".teaName").text(),
                listNum: listNum,
                bill: $(".money").text().slice(1),
                state: "等待中",
                img: $(".smallimg").prop("src"),
                date: `${date.toLocaleString()}`,
                num: Number($(".teaNum").val())
            })
            localStorage.setItem("teaCar", JSON.stringify(teaCar))
            listNum++
            localStorage.setItem("listNum", JSON.stringify(listNum))
            apply()
        } else {
            window.location.href = `./login.html`;
        }
    })
})